import * as React from "react";
import { Component } from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import { Button, DatePicker } from "antd";
import moment from "moment";
import EleAndWater from "../../../../../../compontents/EleAndWater";
import "./index.less";
const DatePickers:any= DatePicker;

export interface ConditionProps {
  onSubmit: (date: any) => any;
}

export interface ConditionState {}

@observer
class Condition extends Component<ConditionProps, ConditionState> {
  @observable public dataJson: any = {};
  private dataTime: any = moment();
  // state = { :  }
  render() {
    return (
      <div className="CompareAnalysis-Condition">
        <div className="bare_body" style={{ padding: 16, paddingTop: 0 }}>
          <EleAndWater
            onChange={(type: Number) => {
              this.onEleAndWater(type);
            }}
            style={{ paddingLeft: 16, paddingTop: 16 }}
          />
          <DatePickers
            allowClear={false}
            picker={"year"}
            value={this.dataTime}
            onChange={(date: any) => {
              this.getTime(date);
            }}
            style={{ marginLeft: 16 }}
          />
          <Button
            type="primary"
            className="l_distance"
            onClick={() => {
              this.getCondition();
            }}
          >
            查询
          </Button>
          <div className="clear"></div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.dataJson.dateString = this.dataTime.format("YYYY");
  }
  getTime(date: any) {
    this.dataTime = date;
    this.dataJson.dateString = date.format("YYYY");
    this.forceUpdate();
  }
  onEleAndWater(type: Number) {
    this.dataJson.type = type;
  }

  getCondition() {
    this.props.onSubmit(this.dataJson);
  }
}

export default Condition;
